<template>
  <div class="right">
    <div class="right-top">
      <!-- 组件 -->
      <typelist :types="qianname"></typelist>
    </div>

    <div class="right-bottom">
      <div class="right-bottom-top">
        <span> 综合 </span>
      </div>
      <div class="right-bottom-bottom">
        <div>
          <articess :newlist="newlist"></articess>
          <div v-if="newlist.length === 0">
            没有数据
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import typelist from '../../components/typelist'
import articess from '../../components/artices'
import { getmyblogAPI } from '../../api/recommendone'
import { getmyblog } from '../../api/blogone'

export default {
  components: {
    typelist,
    articess
  },
  props: {
    qians: {
      type: Number
    },
    qianname: {}
  },
  watch: {
    qians(news) {
      this.getnewlist(news)
    }
  },
  data() {
    return {
      newlist: []
    }
  },
  methods: {
    async getnewlist(id) {
      if (id === 1) {
        this.getallblog(1)
        return 0
      }
      console.log(this.$props.qians);
      const res = await getmyblogAPI({
        page: '1',
        typeId: id
      })
      this.newlist = res.data.data.blogInfo || []
      console.log(res);
    },
    async getallblog(page = 0) {
      const res = await getmyblog({
        page,
        query: ''

      })
      this.newlist = res.data.data
    }
  },
  mounted() {
    if (this.$props.qians === 1) {
      this.getallblog(1)
    }
    else {
      this.getnewlist()
    }
  }
}
</script>

<style lang="scss" scoped>
.right{
  width: 100%;
}
.right-top{
  // width: 1188px;
  height: 188px;
  background-color: #394858;
  
}

.right-bottom{
  padding:0 230px;
  overflow: auto;
}
.right-bottom-top{
  margin-bottom: 20px;
  display: flex;
  gap: 50px;
  padding: 10px 0;
  border-bottom:1px solid rgb(216, 216, 216) ;
  color: #fff;
}
</style>